<!-- 活动详情 -->
<template>
  <div>
    <div class="hdDetails_wrapper">
      <div class="UpPart">
        <img class="top_img" :src="picUrl(DetailData.url)" />
        <div class="text_box">
          <span>{{DetailData.activityStatus}}</span>
          <span>{{DetailData.title}}</span>
        </div>
        <div class="Statistics">
          <img src="@/assets/activity/chakan.png" alt />
          <span class="sz">{{DetailData.browseTimes}}</span>
          <span>报名：{{BMrs}}/{{DetailData.signUpNumber}}</span>
        </div>
      </div>
      <div style="height:20px;width:90vw;background:#f8f8f8;"></div>
      <div class="LowerPart">
        <div class="Situation">
          <div class="fk"></div>参与情况
        </div>
        <van-divider />
        <div class="signUp">
          <div>
            <span>
              已报名（
              <span style="color:#ffdebd;">{{BMrs}}</span>）
            </span>
            <img src alt />
          </div>
          <!-- <div class="ckqb">查看全部<img src="@/assets/activity/jiantou.png" alt=""></div> -->
        </div>
        <div class="Situation jl">
          <div class="fk"></div>活动信息
        </div>
        <van-divider />
        <div class="wenzi">
          <!-- <p>活动主题：{{DetailData.description}}</p> -->
          <div>活动主题：<p v-html="DetailData.description"></p></div>
          <p>活动时间：{{DetailData.createTime}}</p>
          <p>
            活动地点：
            <img src="@/assets/activity/dingweilv.png" alt />
            <span>{{DetailData.adress}}</span>
          </p>
          <p>发布单位：<span class="nlfb">{{DetailData.regionName}}</span></p>
        </div>
        <div class="dslr">
          <div class="icons" value="0" @click="localValus.zan.length > 0 ? removeLeiren('0', '赞') :comments('0', '赞')">
            <img v-if="localValus.zan.length > 0" src="@/assets/aaa/s1.png" height="20px" />
            <img v-else src="@/assets/aaa/s2.png" height="20px" />
            <div class="tips">赞({{values0}})</div>
          </div>
          <div class="icons" value="1" @click=" localValus.jiayou.length > 0 ? removeLeiren('1', '加油') : comments('1', '加油')">
            <img v-if="localValus.jiayou.length > 0" src="@/assets/aaa/m1.png" height="20px" />
            <img v-else src="@/assets/aaa/m2.png" height="20px" />
            <div class="tips">加油({{values1}})</div>
          </div>
          <div class="icons" value="2" @click=" localValus.leiren.length > 0 ? removeLeiren('2', '雷人') : comments('2', '雷人')" >
            <img v-if="localValus.leiren.length > 0" src="@/assets/aaa/r1.png" height="20px" />
            <img v-else src="@/assets/aaa/r2.png" height="20px" />
            <div class="tips">雷人({{values2}})</div>
          </div>
        </div>
        <div
          :class="ifSignUp?  'wybm': 'wybmgry'"
          @click="participateIn"
        >{{ ifSignUp ? "我要报名":"我已报名" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "activtyDetails",
  data() {
    let date = this.slow.getTime("date");
    console.log(date);
    let localkey = date + "_zjl_" + this.$route.query.DetailData.id;
    let localValus = {
      zan: [],
      jiayou: [],
      leiren: []
    };
    if (window.localStorage.getItem(localkey)) {
      localValus = JSON.parse(window.localStorage.getItem(localkey));
      console.log(localValus)
    }
    return {
      ifSignUp: true,
      DetailData: "", //列表传入数据
      BMrs: "", //报名人数
      pageIndex: 1,
      pageSize: 80,
      totalCount: 0,
      Searchkey: "", //搜索关键字,
      values: [0, 0, 0],
      values0: "",
      values1: "",
      values2: "",
      localkey: localkey,
      localValus: localValus,
      // isLeiren: false
    };
  },
  created() {
    this.post("/community_activity/participate_in_activities", {
      wxid: this.slow.userInfo.openId,
      // wxid:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
      activityId: this.DetailData.id,
      userName: this.slow.userInfo.nickname
    }).then(res => {
      if (res.flag == "false") {
        this.ifSignUp = res.flag;
      }
    });
  },
  computed: {},
  methods: {
    //富文本图片
    replaceImgs(htmlText) {
      return htmlText.replace(
        /\s(src=")/g,
        ' width="100%" height="150px" src="http://www.hkqwgb.cn:8080'
      );
    },
    // 获取评论统计
    getsums() {
      this.post("/community_activity/activity_vote_sta", {
        id: this.DetailData.id
      }).then(r => {
        r.list.forEach(element => {
          if (element.name === "赞") {
            this.values0 = element.value;
          }
          if (element.name === "加油") {
            this.values1 = element.value;
          }
          if (element.name === "雷人") {
            this.values2 = element.value;
          }
        });
      });
    },
    comments(type, typeName) {
      console.log('点赞')
      // if (typeName === "赞" && this.localValus.zan.length > 2) {
      //   this.$toast("1天只能点三次");
      //   return;
      // }
      // if (typeName === "加油" && this.localValus.jiayou.length > 2) {
      //   this.$toast("1天只能点三次");
      //   return;
      // }
      // if (typeName === "雷人" && this.localValus.leiren.length > 2) {
      //   this.$toast("1天只能点三次");
      //   return;
      // }
      this.post("/community_activity/activity_vote", {
        dataAreaCode: localStorage.getItem("dataAreaCode"),
        id: this.DetailData.id,
        userId: this.slow.userInfo
          ? this.slow.userInfo.openId
          : "8a4c60a170ec39780170f0759f720069",
        userName: this.slow.userInfo ? this.slow.userInfo.nickname : "测试",
        type: type,
        typeName: typeName
      }).then(r => {
        this.getsums();
        if (r.success) {
          if (typeName === "赞") {
            this.localValus.zan.push(1);
            console.log('赞数量'+this.localValus.zan)
            // this.isZan = true;
          }
          if (typeName === "加油") {
            this.localValus.jiayou.push(1);
            console.log('加油数量'+this.localValus.typeName)
            // this.isJiayou = true;
          }
          if (typeName === "雷人") {
            this.localValus.leiren.push(1);
            console.log('雷人数量'+this.localValus.leiren)
            // this.isLeiren = true;
          }
          console.log("this.localkey", this.localkey);
          window.localStorage.setItem(
            this.localkey,
            JSON.stringify(this.localValus)
          );
          this.$toast.success("投票成功");
        } else {
          this.$toast(r.message || "失败");
        }
      });
    },

    // 取消投票,雷人
    removeLeiren(type, typeName) {
      console.log('取消')
      this.post("/community_activity/activity_vote_remove", {
        dataAreaCode: localStorage.getItem("dataAreaCode"),
        id: this.DetailData.id,
        userId: this.slow.userInfo
          ? this.slow.userInfo.openId
          : "8a4c60a170ec39780170f0759f720069",
        userName: this.slow.userInfo ? this.slow.userInfo.nickname : "测试",
        // type: type,
        // typeName: typeName
      }).then(r => {
        this.getsums();
        if (r.success) {
          // this.isLeiren = false;
          this.localValus.zan = [];
          this.localValus.jiayou = [];
          this.localValus.leiren = [];
          console.log("this.localkey", this.localkey);
          window.localStorage.setItem(
            this.localkey,
            JSON.stringify(this.localValus)
          );
          this.$toast.success("取消投票成功");
        } else {
          this.$toast(r.message || "失败");
        }
      });
    },

    loadBMNum() {
      //获取报名人数
      this.post("/community_activity/participate_in_activities_number", {
        activityId: this.DetailData.id
      })
        .then(r => {
          this.BMrs = r.object;
        })
        .catch(err => {});
    },
    // 获取活动列表
    GetList() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.post("community_activity/loadInfo", {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        // dataAreaCode: sessionStorage.getItem("dataAreaCode"),
        title: this.Searchkey,
        startTime: "2019-01-01",
        endTime: "",
        activityType: this.activityType,
        activityStatus: this.activityStatus
      })
        .then(r => {
          this.$toast.clear();
          // this.listData = this.listData.concat(r.list);
          this.listData = r.list;
          this.totalCount = r.pageInfo.totalCount;
          this.pageIndex += 1;
        })
        .catch(err => {});
    },
    Records() {
      //浏览记录
      this.post("/community_activity/browseTimes", {
        activityId: this.DetailData.id
      })
        .then(r => {
          console.log("浏览次数");
        })
        .catch(err => {});
    },
    participateIn() {
      console.log(this.slow.userInfo);
      if (!this.slow.isAuth) {
      // if (!this.slow.isAuth || this.slow.userInfo.subscribe == 0) {
        this.$router.push("/register");
      } else {
        //我要报名
        if (this.ifSignUp) {
          this.post("/community_activity/participate_in_activities", {
            wxid: this.slow.userInfo.openId,
            // wxid:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
            activityId: this.DetailData.id,
            userName: this.slow.userInfo.nickname
          })
            .then(r => {
              if (r.success == true) {
                if (r.flag == "true") {
                  this.$toast(r.message || "参加活动成功！");
                } else if (r.flag == "false") {
                  this.$toast(r.message || "不能重复参加活动！");
                } else if (r.flag == "") {
                  console.log("暂时不清楚需要给什么提示");
                }
                this.ifSignUp = r.flag;
              } else {
                this.$toast.fail("修改活动失败");
              }
            })
            .catch(err => {
              this.$toast.fail("服务器未反应，请稍后重试");
            });
        } else {
          this.$toast.fail("您已报名过该活动！");
        }
      }
    }
  },
  created() {
    this.DetailData = this.$route.query.DetailData;
    this.DetailData.description = this.replaceImgs(this.$route.query.DetailData.description);//富文本图片展示
    this.loadBMNum();
    this.Records();
    this.getsums();
  }
};
</script>
<style lang="scss">
@import "~@/smobile.scss";
.hdDetails_wrapper {
  padding: 0 5vw 5vw 5vw;
  overflow: hidden;
  .top {
    width: 90vw;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      float: left;
      margin-left: 10px;
      color: #999999;
    }
    .titler {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
    }
  }
  .UpPart {
    width: 90vw;
    overflow: hidden;
    .top_img {
      display: block;
      width: 90vw;
      height: 40vw;
    }
    .text_box {
      padding: 4vw 0 2vw 0;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        padding: 1.2vw 4vw;
        background: #4dd475;
        color: #ffffff;
        border-radius: 20px;
        margin-right: 15px;
        font-size: 12px;
      }
      span:nth-child(2) {
        display: inline-block;
        width: 70%;
      }
    }
    .Statistics {
      float: right;
      margin-bottom: 15px;
      img {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
      }
      .sz {
        display: inline-block;
        margin-right: 15px;
      }
    }
  }
  .LowerPart {
    padding: 15px 0;
    .Situation {
      width: 90vw;
      display: flex;
      font-size: 18px;
      .fk {
        width: 6px;
        height: 25px;
        background: #2883f1;
        margin-right: 10px;
      }
    }
    .jl {
      margin-top: 15px;
    }
    .signUp {
      width: 90vw;
      display: flex;
      justify-content: space-between;
      .ckqb {
        color: #2970f9;
      }
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }
    .wenzi {
      p {
        margin: 10px 0;
        word-wrap: break-word;
      }
      p:nth-child(1) {
        margin-top: 0px;
      }
      p:nth-child(3) {
        img {
          display: inline-block;
          margin-right: 5px;
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
        span {
          color: #333333;
          font-weight: 700;
        }
      }
      .nlfb{
        display: inline-block;
        text-align: center;
        font-size: 12px;
        background: #e5b03e;
        padding: 1vw 2vw;
        border-radius:  4vw;
        color: #ffffff;
        margin-bottom: 20px;
      }
    }
    .wybm {
      width: 90vw;
      height: 40px;
      line-height: 40px;
      color: #ffffff;
      background: #16a1f7;
      text-align: center;
    }

    .wybmgry {
      width: 90vw;
      height: 40px;
      line-height: 40px;
      color: #ffffff;
      background: #919191;
      text-align: center;
    }
  }
}
.dslr {
  display: flex;
  margin-bottom: 15px;
  .icons {
    flex: 1;
    text-align: center;
    .tips {
      font-size: 12px;
    }
  }
}
</style>